<template>
  <div class="NavigationMap">
    <!-- 地图 -->
    <div id="container"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  mounted () {
    /* eslint-disable */
    let map = undefined
    window.onLoad = function () {
      map = new AMap.Map('container', {
        center: [113.95049740288542, 22.531963829081878],
        zoom: 17
      })
      let marker = new AMap.Marker({
        position: [113.95049740288542, 22.531963829081878],
        offset: new AMap.Pixel(-13, -30)
      });
      marker.setMap(map)

      let path2 = [
        [113.95007361386106, 22.53417371018338],
        [113.94767035458372, 22.53052689190569],
        [113.95333518002317, 22.531735902114225]
      ]

      let polygon2 = new AMap.Polygon({
        path: path2
      })
      map.add([polygon2])
      map.setFitView()
      var polyEditor = new AMap.PolygonEditor(map);
      polygon.on('dblclick', () => {
        polyEditor.setTarget(polygon);
        polyEditor.open();
      })
    }
    let url = 'https://webapi.amap.com/maps?v=1.4.15&key=486092f199152131795df5e556d361a9&callback=onLoad'
    let jsapi = document.createElement('script')
    jsapi.charset = 'utf-8'
    jsapi.src = url
    jsapi.id = 'gaodeSdk'
    document.head.appendChild(jsapi)

    // new AMap.Marker({
    //   map: map,
    //   position: [113.95049740288542, 22.531963829081878]
    // })


    /* eslint-enable */
    this.$once('hook:beforeDestroy', function () {
      let gaodeSdk = document.getElementById('gaodeSdk')
      document.head.removeChild(gaodeSdk)
    })
  }
}
</script>

<style scoped>
	#container {
		height: 100%;
	}
</style>
